<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
</head>
<body>
<h2>减少数据库压力，每100秒产生一次数据,显示10分钟之内的数据</h2>
<canvas id="lineChart"></canvas>
<input type="hidden" th:value="${dataLogs}" id="name"/>
<script th:inline="javascript">
    // 将dataLogs数据转换为JSON，并通过Thymeleaf输出
    var dataLogs = JSON.parse(document.getElementById("name").value);
    console.log(dataLogs)
    // 提取时间戳和数据值
    const timestamps = dataLogs.map(log => {
        // 假设 log.timestamp 是时间戳，转换成 Date 对象
        const date = new Date(log.timestamp);

        // 获取年月日
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 月份是从 0 开始的，所以要加 1
        const day = date.getDate().toString().padStart(2, '0');  // 确保是两位数

        // 获取时分秒
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');

        // 返回完整的格式化日期时间
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    });
    ; // 假设dataLogs中的对象有timestamp属性
    const dataValues = dataLogs.map(log => log.dataValue);  // 假设dataLogs中的对象有dataValue属性

    const data = {
        labels: timestamps,
        datasets: [{
            label: 'Data Value',
            data: dataValues,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    };

    const config = {
        type: 'line',
        data: data,
    };

    new Chart(document.getElementById('lineChart'), config);
</script>
</body>
</html>
